<template>
  <div class="userhead">
    <el-avatar :size="50" src="http://localhost:8080/mmexport1686210092213.png" />
    <div class="usertitle">
      <p class="username">yangj.jy / 严国峻</p>
      <p class="useremail">yangj.jy@fujitsu.com</p>
    </div>
    <el-input v-model="searchinput" size="small" class="search" style="width:90%,margin-top:10px;" placeholder="搜索" :prefix-icon="Search"/>
  </div>
  <el-tabs :tab-position="tabPosition" style="height: 100vh" v-model="editableTabsValue" type="card" class="demo-tabs"
    closable @tab-remove="removeTab">
    <el-tab-pane v-for="item in editableTabs" :key="item.name" :label="item.title" :name="item.name">
      <el-card class="box-card">
        {{ item.content }}
        <div class="overflow"> 
          <ul class="todolist">
            <li v-for="(list, index) in item.child" :key="index" @click.stop="gorightbar(list.listTitle)"><el-icon
                class="CircleCheck" @mouseenter="iconlistchang(index)" @mouseleave="iconlistback">
                <component :is="listicon===index ? SuccessFilled : CircleCheck" @click.stop="godone(list.id)"></component>
              </el-icon>{{ list.listTitle }}
              <el-icon class="Close-icon" @click.stop="closelist(list.id)">
                <Close />
              </el-icon>
              <el-icon class="start-icon">
                <Star />
              </el-icon>
            </li>
          </ul>
          <ul class="todolist">
            <div class="doneclass">
              <el-button size="small"  v-show="showbutton"> > 已完成 {{ length }}</el-button>
            </div>
            <li v-for="(list, index) in item.done" :key="index" class="donelist" @click.stop="gorightbar(list.listTitle)">
              <el-icon class="CircleCheck" @mouseenter="iconlistchang(index)" @mouseleave="iconlistback">
                <component :is="SuccessFilled " @click.stop="doneback(list.id)"></component>
              </el-icon>{{ list.listTitle }}
              <el-icon class="Close-icon" @click.stop="closelist(list.id)">
                <Close />
              </el-icon>
              <el-icon class="start-icon">
                <Star />
              </el-icon>
            </li>
          </ul>
        </div>
        <div>
          <rightbar v-show="showRightBar" @click="hidePopup" :title=title ref="listhtml" id="rightbarhtml"></rightbar>
        </div>
        <el-input v-model="input1" class="addTask" size="large" placeholder="添加任务" :prefix-icon=inputicon
          @focus="focusInput" @blur="blurInput" @keyup.enter="getinputvalue()" />
      </el-card>
    </el-tab-pane>
  </el-tabs>
  <el-button size="large" @click="dialogFormVisible = true" class="add-bottom">
    <el-icon size="large">
      <Plus />
    </el-icon>新建列表
  </el-button>
  <el-dialog v-model="dialogFormVisible" title="新建列表">
    <el-form>
      <el-form-item label="列表名称">
        <el-input v-model="tabtitle" />
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">Cancel</el-button>
        <el-button type="primary" @click="addTab(editableTabsValue)">
          Confirm
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script  setup>
import { computed, ref, onMounted, onUnmounted, onBeforeMount } from 'vue'
import { Plus, CircleCheck, Star, SuccessFilled, Close, Search } from '@element-plus/icons-vue'
import { uuid } from "../lib/lib.js"
import rightbar from './Rightbar.vue';
import { useStore } from "vuex"

const store = useStore()
let tabIndex = 2
const editableTabsValue = ref('1')
const dialogFormVisible = ref(false)
const tabtitle = ref("")
const input1 = ref('')
const searchinput = ref('')
const inputicon = ref(Plus)
const listicon = ref('')
const tabPosition = ref('left')
const bgcolor = ref("rgba(255, 255, 255, 0.7)")
const showRightBar = ref(false)
const listhtml = ref(null)
const title = ref("")
const editableTabs = ref([
  {
    title: '我的一天',
    name: '1',
    content: '我的一天',
    child: [
      { listTitle: '记得吃早点', id: '1' },
      { listTitle: '锻炼身体', id: '2' }
    ],
    done: [{ listTitle: '修改bug', id: '3' }]
  },
  {
    title: '重要',
    name: '2',
    content: '重要',
    child: [],
    done: []
  },
])

const addTab = (targetName) => {
  dialogFormVisible.value = false 
  const newTabName = `${++tabIndex}`
  let pushvalue = {
    title: tabtitle.value,
    name: newTabName,
    content: tabtitle.value,
    child: [],
    done: []
  }
  editableTabs.value.push(JSON.parse(JSON.stringify(pushvalue)))
  editableTabsValue.value = newTabName
  tabtitle.value = ""
}

const removeTab = (targetName) => {
  const tabs = editableTabs.value
  let activeName = editableTabsValue.value
  if (activeName === targetName) {
    tabs.forEach((tab, index) => {
      if (tab.name === targetName) {
        const nextTab = tabs[index + 1] || tabs[index - 1]
        if (nextTab) {
          activeName = nextTab.name
        }
      }
    })
  }

  editableTabsValue.value = activeName
  editableTabs.value = tabs.filter((tab) => tab.name !== targetName)
}

const focusInput = () => {
  bgcolor.value = "rgba(255, 255, 255, 1)"
  inputicon.value = CircleCheck
}
const blurInput = () => {
  bgcolor.value = "rgba(255, 255, 255, 0.7)"
  inputicon.value = Plus
}
const iconlistchang = (index) => {
  listicon.value = index
}
const iconlistback = () => {
  listicon.value = ""
}
const getinputvalue = () => {
  if (input1.value === "") {
    return false
  }
  let pushvalue = {
    listTitle: input1.value,
    id: uuid()
  }
  editableTabs.value[editableTabsValue.value - 1].child.push(JSON.parse(JSON.stringify(pushvalue)));
  input1.value = ""
}

const closelist = (listid) => {
  let idindex = editableTabs.value[editableTabsValue.value - 1].child.findIndex(item => item.id === listid);
  if (idindex !== -1) {
    editableTabs.value[editableTabsValue.value - 1].child.splice(idindex, 1);
  }
  let doneindex = editableTabs.value[editableTabsValue.value - 1].done.findIndex(item => item.id === listid);
  if (doneindex !== -1) {
    editableTabs.value[editableTabsValue.value - 1].done.splice(idindex, 1);
  }
}
const showbutton = computed(() => { return editableTabs.value[editableTabsValue.value - 1].done.length > 0 })
const length = computed(() => { return editableTabs.value[editableTabsValue.value - 1].done.length })
const godone = (listid) => {
  let idindex = editableTabs.value[editableTabsValue.value - 1].child.findIndex(item => item.id === listid);
  if (idindex !== -1) {
    editableTabs.value[editableTabsValue.value - 1].done.push(editableTabs.value[editableTabsValue.value - 1].child[idindex])
    editableTabs.value[editableTabsValue.value - 1].child.splice(idindex, 1);
  }
}
const doneback = (listid) => {
  let idindex = editableTabs.value[editableTabsValue.value - 1].done.findIndex(item => item.id === listid);
  if (idindex !== -1) {
    editableTabs.value[editableTabsValue.value - 1].child.push(editableTabs.value[editableTabsValue.value - 1].done[idindex])
    editableTabs.value[editableTabsValue.value - 1].done.splice(idindex, 1);
  }
}
const gorightbar = (titlevalue) => {
  showRightBar.value = !showRightBar.value;
  title.value = titlevalue
}
const hidePopup = (e) => {
  if (listhtml.value) {
    let isSelf = document.getElementById("rightbarhtml").contains(e.target)
    if (!isSelf) {
      showRightBar.value = false
    }
  }
};
onMounted(() => {
  document.addEventListener('click', hidePopup);
});
onUnmounted(() => {
  document.removeEventListener('click', hidePopup);
});
onBeforeMount(() => {
  store.dispatch("getlistdata")
});
</script>

<style  lang="less" >
@import "../style/home.less";

.el-input__wrapper {
  background-color: v-bind(bgcolor);
}
</style>